<template>
	<view class="example-page">
		<view class="title">JWeightPrice 组件示例</view>
		
		<!-- 基础用法 -->
		<view class="section">
			<view class="section-title">基础用法</view>
			<JWeightPrice :price="12.8" :weight="0.5" />
		</view>
		
		<!-- 自定义颜色 -->
		<view class="section">
			<view class="section-title">自定义颜色</view>
			<JWeightPrice 
				:price="25.6" 
				:weight="1.0"
				weightColor="#333"
				unitPriceColor="#ff6b35"
			/>
		</view>
		
		<!-- 自定义样式 -->
		<view class="section">
			<view class="section-title">自定义样式</view>
			<JWeightPrice 
				:price="8.8" 
				:weight="0.3"
				textSize="28rpx"
				backgroundColor="#fff2e8"
				padding="12rpx 16rpx"
				borderRadius="12rpx"
			/>
		</view>
		
		<!-- 不同价格示例 -->
		<view class="section">
			<view class="section-title">不同价格示例</view>
			<JWeightPrice :price="6.5" :weight="1.0" />
			<JWeightPrice :price="15.8" :weight="0.4" />
			<JWeightPrice :price="99.9" :weight="2.5" />
		</view>
	</view>
</template>

<script>
import JWeightPrice from './JWeightPrice.vue'

export default {
	name: 'JWeightPriceExample',
	components: {
		JWeightPrice
	}
}
</script>

<style lang="less" scoped>
.example-page {
	padding: 40rpx;
	
	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 40rpx;
		text-align: center;
	}
	
	.section {
		margin-bottom: 40rpx;
		
		.section-title {
			font-size: 28rpx;
			color: #666;
			margin-bottom: 20rpx;
			font-weight: 500;
		}
	}
}
</style>


